<template>
  <view>
    <nav-bar title="详情"></nav-bar>
    <view class="content">
      <view class="head-img">
        <image class="content-img" :src="serviceDetail.img || baseImgUrl + '/userImg/img_service_big_bg.png'" mode="aspectFill"/>
      </view>
      <view class="consult">
       <view class="consult-top">
        {{ serviceDetail.name }}
       </view>
       <view class="consult-center">有效期:{{ serviceDetail.validMonths }}个月</view>
       <view class="consult-down">
         <view class="left"> 
          <view class="money">￥{{ serviceDetail.price }}</view>
         </view>
         <!-- <view class="right">
          {{ serviceDetail.people }}人已购买
         </view> -->
       </view>
      </view>
      <scroll-view scroll-y :style="{ height: scrollHeight }">
        <view class="image-text">
          <view class="title">-下拉查看图文详情-</view>
          <view class="service-process">
            <view class="service-title">
              <view class="line"></view>
              <view class="word">服务流程</view>
            </view>
            <view class="service-content">
              <rich-text class="text" :nodes="serviceDetail.serviceProcess"></rich-text>
            </view>
          </view>
          <view class="service-detail">
            <view class="service-title">
              <view class="line"></view>
              <view class="word">服务详情</view>
            </view>
            <view class="service-content">
              <rich-text class="text" :nodes="serviceDetail.serviceDetail"></rich-text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="form_bottom_btn">
        <view class="btn-box">
        <view class="confirm" @click="clickBuy">购买服务</view>
        </view>
      </view>
      <!-- 购买服务弹框 -->
      <you-popup
        :popupVisible="popupVisible"
        @popupClose="popupVisible = false"
        :showTitle="false"
        :showBtn="false"
      >
        <view slot="popupContent">
          <!-- 标题 -->
          <view class="popup-img">
          <image class="pic-img" :src="baseImgUrl + '/userImg/img_tip.png'" mode="aspectFill"/>
          </view>
          <view class="popup-title">购买须知</view>
          <view class="contain-text">
            <text>1.健康保健不可代替就医，如有就诊需求请前往医院</text>
            <text>2.预约成功后，请于当日按预约时间前往</text>
            <text>3.为合理分配资源，如个人原因无法前往，请至少提前一个工作日取消预约。如未及时取消，将影响您未来的预约办理。</text>
          </view>
          <view class="popup-btn" @click="clickPopup">我知道了</view>
        </view>
      </you-popup>
    </view>
  </view>
</template>

<script>
  import api_user from '@/api/user'
  import { baseImgUrl } from '@/config'
  export default {
    name: 'CustomServeDetail',
    data() {
      return {
        baseImgUrl,
        scrollHeight: '',
        serviceDetail: {
          title: '康复咨询VIP定制服务',
          time: '6',
          money: '188',
          oldMoney: '208',
          people: '12056',
          content: '神经外科副主任医师。于1989年北京医科大学医疗系毕业。 毕业后分配在天坛医院外科工作，一年后进入神经外科工作，现已达20年。20年来在神经外科各个专业组轮转工作学习。先在外伤组，打下了神经外科工作的基础。又分别在小儿、脊髓、脑瘤、脑血管病、脑干和颅底等病房工作学习。',
          detail: '服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情服务详情详情详情详情详情详情详情详情详情详情详情'
        },
        popupVisible: false,
        serviceId: ''
      }
    },
    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 370 - 64 + 'px'
      this.serviceId = options.id
      this.getServiceDetail()
    },
    methods: {
      getServiceDetail() {
        const params = {
          id: this.serviceId
        }
        api_user.fetchVipDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          result.serviceProcess = result.serviceProcess && result.serviceProcess.replace(/\n/g, '<br/>')
          result.serviceDetail = result.serviceDetail && result.serviceDetail.replace(/\n/g, '<br/>')
          this.serviceDetail = result
        })
      },
      clickBuy(){
        this.popupVisible = true
      },
      clickPopup(){
        this.popupVisible = false
        const serviceDetail = encodeURIComponent(JSON.stringify(this.serviceDetail))
        uni.navigateTo({
          url: `/subPages/userIndex/memberCenter/confirmPlaceOrder?serviceDetail=${serviceDetail}`
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.content{
  padding: 30rpx;
  .head-img{
    .content-img{
    border-radius: 16rpx;
    width: 100%;
    height: 460rpx;
    }
  }
 .consult{
  height: 220rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  background: #fff;
  margin-top: 30rpx;
  .consult-top{
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  .consult-center{
    font-size: 24rpx;
    color: #999;
    margin-top: 30rpx;
  }
  .consult-down{
    display: flex;
    justify-content: space-between;
    margin-top: 14rpx;
    font-size: 24rpx;
    color: #999;
    .left{
      display: flex;
      align-items: center;
      .money{
        font-size: 42rpx;
        font-weight: 600;
        color: #ff513a;
      }
      .old-money{
        margin-left: 10rpx;
        text-decoration:line-through;
      }
    }
  }
 }
 .image-text{
    background: #fff;
    margin-top: 30rpx;
    border-radius: 16rpx;
  .title{
    text-align: center;
    padding-top: 28rpx;
    font-size: 24rpx;
    color: #999;
  }
  .service-title{
      display: flex;
      align-items: center;
      .line{
        width: 8rpx;
        height: 30rpx;
        background:#115baa;
        border-radius:4rpx;
      }
      .word{
        font-size: 28rpx;
        color: #333;
        margin-left: 20rpx;
      }
    }
  .service-content{
    font-size: 28rpx;
    color: #666;
    line-height: 42rpx;
    margin-top: 10rpx;
    }
  .service-process{
    padding: 28rpx 20rpx 0 40rpx;

  }
  .service-detail{
    padding: 28rpx 20rpx 0 40rpx;
  }
 }
 .popup-img{
  width: 306rpx;
  height: 206rpx;
  margin: 0 auto;
  padding-top: 32rpx;
  .pic-img{
    width: 100%;
    height: 100%;
  }
 }
 .popup-title{
  font-size: 32rpx;
  font-weight: 600;
  color:#2F3033;
  text-align: center;
  margin-top: 16rpx;
 }
 .contain-text{
  padding: 14rpx 48rpx 0 48rpx;
  display: flex;
  flex-direction: column;
  font-size: 28rpx;
  color: #606266;
  line-height: 42rpx;
 }
 .popup-btn{
  width: 100%;
  height: 88rpx;
  margin-top: 53rpx;
  border-top: 1px solid #EDEFF2;
  color: #22749A;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
 }
}
</style>
